<template>
	<div class="sys-container">
		<el-dialog v-model="state.isShowDialog" draggable width="769px">
			<template #header>
				<div style="color: #fff">
					<el-icon size="16" style="margin-right: 3px; display: inline; vertical-align: middle"> <ele-Edit />
					</el-icon>
					<span> {{ props.title }} </span>
				</div>
			</template>
			<el-form :model="state.ruleForm" ref="ruleFormRef" size="default" label-width="100px"
				:disabled="Rendering.disabled">
				<el-row :gutter="35">
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<el-form-item label="产品名称" prop="name"
							:rules="[{ required: true, message: '产品名称不能为空', trigger: 'blur' }]">
							<el-input v-model.trim="state.ruleForm.name" placeholder="产品名称" clearable />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="产品简称" prop="alias"
							:rules="[{ required: true, message: '产品简称不能为空', trigger: 'blur' }]">
							<el-input v-model.trim="state.ruleForm.alias" placeholder="产品简称" clearable />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="产品编码" prop="code"
							:rules="[{ required: true, message: '产品编码不能为空', trigger: 'blur' }]">
							<el-input v-model.trim="state.ruleForm.code" placeholder="产品编码" clearable />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="客户" prop="customerId"
							:rules="[{ required: true, message: '客户不能为空', trigger: 'blur' }]">
							<el-select v-model.trim="state.ruleForm.customerId" placeholder="请选择" class="w100"
								@change="selectChange" filterable>
								<el-option v-for='item in state.customerDict' :key='item.value' :label='item.label'
									:value='item.value' />
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="计费模式" prop="chargingMode"
							:rules="[{ required: true, message: '计费模式不能为空', trigger: 'blur' }]">
							<el-select v-model.trim="state.ruleForm.chargingMode" placeholder="请选择" class="w100">
								<el-option v-for='item in optionDict.chargingModeDict' :key='item.value'
									:label='item.label' :value='item.value' />
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="运营商" prop="platformId"
							:rules="[{ required: true, message: '运营商不能为空', trigger: 'blur' }]">
							<el-select v-model.trim="state.ruleForm.platformId" placeholder="请选择" class="w100">
								<el-option v-for='item in optionDict.operatorPlatformDict' :key='item.value'
									:label='item.label' :value='item.value' />
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="执行时间">
							<el-date-picker v-model.trim="state.ruleForm.priceExecutionTime" type="datetime"
								placeholder="选择日期" style="width: 100%" />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="信息费" prop="informationFee"
							:rules="[{ required: true, type: 'number', message: '信息费(分)不能为空', trigger: 'blur' }]">
							<el-input-number v-model.trim="state.ruleForm.informationFee" :min="0" :max="9999"
								controls-position="right" placeholder="请输入信息费(分)" class="w100" />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="结算价格" prop="settlementPrice"
							:rules="[{ required: true, type: 'number', message: '结算价格(分)不能为空', trigger: 'blur' }]">
							<el-input-number v-model.trim="state.ruleForm.settlementPrice" :min="0" :max="9999"
								controls-position="right" placeholder="请输入结算价格(分)" class="w100" @change="inputChange" />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="成本价格" prop="incomePrice"
							:rules="[{ required: true, type: 'number', message: '成本价格(分)不能为空', trigger: 'blur' }]">
							<el-input-number v-model.trim="state.ruleForm.incomePrice" :min="0" :max="9999"
								controls-position="right" placeholder="请输入成本价格(分)" class="w100" />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="黑名单号码" >
							<el-select v-model.trim="state.ruleForm.blackPhone" placeholder="是否添加黑名单手机号" class="w100">
								<el-option label="未修改" :value="-1"></el-option>
								<el-option label="是" :value="1"></el-option>
								<el-option label="否" :value="2" ></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<!-- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="当日同步" prop="controlLevel">
							<el-radio-group v-model="state.ruleForm.syncPlanDaily" class="ml-4">
								<el-radio :label="1">是</el-radio>
								<el-radio :label="2">否</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-col> -->
					<el-col :xs="24" :sm="10" :md="10" :lg="10" :xl="10" class="mb20">
						<el-form-item label="到量控制" prop="arrivalType">
							<el-radio-group v-model.trim="state.ruleForm.arrivalType" @change="arrivalControl">
								<el-radio :label="1">请求</el-radio>
								<el-radio :label="2">用户</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="7" :md="7" :lg="7" :xl="7" class="mb20">
						<el-form-item label="请求上限" prop="requestLimit">
							<el-input-number v-model.trim="state.ruleForm.requestLimit" placeholder="请输入上限" :min="0"
								controls-position="right" class="w100"
								:disabled="!isArrival.isArrivalControl"></el-input-number>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="7" :md="7" :lg="7" :xl="7" class="mb20">
						<el-form-item label="用户上限" prop="userLimit">
							<el-input-number v-model.trim="state.ruleForm.userLimit" placeholder="请输入用户上限" :min="0"
								controls-position="right" class="w100"
								:disabled="isArrival.isArrivalControl"></el-input-number>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<el-form-item label="计费链接">
							<el-input v-model.trim="state.ruleForm.chargingLink" placeholder="请输入计费链接" clearable
								type="textarea" style="word-break: break-all;" :autosize="{ minRows: 2 }"
								@change="chargin" />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<el-form-item label="验证链接">
							<el-input v-model.trim="state.ruleForm.vrifyLink1" placeholder="请输入验证链接" clearable
								type="textarea" style="word-break: break-all;" :autosize="{ minRows: 2 }" />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<el-form-item label="图形链接" prop="chargingImageCodeLink">
							<el-input v-model.trim="state.ruleForm.chargingImageCodeLink" placeholder="图形接口地址" clearable
								type="textarea" maxlength="300" :autosize="{ minRows: 1 }" />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="状态">
							<el-select v-model.trim="state.ruleForm.status" placeholder="请选择" class="w100">
								<el-option label="启用" :value="1"></el-option>
								<el-option label="停用" :value="2"></el-option>
								<el-option label="到量" :value="3" :disabled="true"></el-option>
								<el-option label="短期关停" :value="4" :disabled="true"></el-option>
							</el-select>
						</el-form-item>
					</el-col>

					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="验证位数">
							<el-input v-model.trim="state.ruleForm.verifyCodeLength" placeholder="验证码长度" clearable
								type="text" maxlength="30" />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="积分" prop="integral"
							:rules="[{ required: true, type: 'number', message: '请输入积分(分)不能为空', trigger: 'blur' }]">
							<el-input-number v-model.trim="state.ruleForm.integral" :min="0" :max="9999"
								controls-position="right" placeholder="请输入积分(分)" class="w100" />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="计费结果" prop="verifyPayResult">
							<el-radio-group v-model.trim="state.ruleForm.verifyPayResult">
								<el-radio :label="false">无</el-radio>
								<el-radio :label="true">有</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<el-form-item label="服务程序">
							<el-input v-model.trim="state.ruleForm.reflection" placeholder="请输入服务程序(dll)" clearable
								type="textarea" maxlength="255" :autosize="{ minRows: 1 }" />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<el-form-item label="备注">
							<el-input v-model.trim="state.ruleForm.remark" placeholder="请输入备注内容" clearable
								type="textarea" maxlength="255" style="word-break: break-all;" :autosize="{ minRows: 2 }" />
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="cancel" size="default">{{ Rendering.disabled ? '关闭' : '取消' }}</el-button>
					<el-button type="primary" @click="submit" size="default" v-show="!Rendering.disabled">确
						定</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script lang="ts" setup name="editDiCustomerProduct">

import { reactive, ref } from 'vue';
import mittBus from '/@/utils/mitt';
import { optionDict } from '/@/const/dict';
import { DiCustomerProduct } from '/@/api/models';
import SysDiCustomerProductApi from '/@/api/delivery/customerProduct';
import SysDiCustomerApi from '/@/api/delivery/customer';
import commonFunction from '/@/utils/commonFunction';
import { ElMessage } from 'element-plus';

// 定义变量内容
const { generateRandomLowercaseString } = commonFunction();

const props = defineProps({
	title: String,
});

const ruleFormRef = ref();
const state = reactive({
	customerDict: [],
	isShowDialog: false,
	ruleForm: {} as DiCustomerProduct,
});

// 到量控制请求 & 用户 哪个可以选中并修改
let isArrival = reactive({
	isArrivalControl: true
});

// 是否可以编辑Form表单
let Rendering = ref<any>({
	disabled: false
})

// 选择用户后自动渲染出来
const selectChange = (value) => {
	// console.log(value, 'sss');

	switch (value) {
		// 盘龙/龙腾
		case '88716021841580037':
			state.ruleForm.chargingLink = 'http://localhost:10222/Changing/SendSMS?phone={MOBILE}&t=业务编码&extdata={ORDER_ID}&ip={IP}&ua={USER_AGENT}&adsource={ADV_SOURCE}&adapp={ADV_APP_PACKAGENAME}';
			state.ruleForm.vrifyLink1 = 'http://localhost:10222/Changing/VerifySMS?verifyCode={VERIFY_CODE}&serialNumber={ORDER_ID}';
			state.ruleForm.reflection = 'BJQiMing.CommonInterface';
			break;
		// 空间科技 &appPackage=1&ua=1
		case '114710144221206533':
			state.ruleForm.chargingLink = 'http://120.79.31.211/data/inter/loadcodeV2?biz=业务编码&ditch=23&mobile={MOBILE}&cpparam={TIMESTAMP:9}&ip_address={IP}&appPackage=1&ua=1';
			state.ruleForm.vrifyLink1 = 'http://120.79.31.211/data/inter/paysubmit?vcode={VERIFY_CODE}&orderid={ORDER_ID}';
			state.ruleForm.reflection = 'SZKongJian.CommonInterface';
			break;
		// 四川 中视游
		case '121693577285752837':
			state.ruleForm.chargingLink = 'http://103.44.245.5:3003/mb00/Generate_Order.aspx?msg=指令&spnumber=通道号&price=价格&phone={MOBILE}&orderIp={IP}&cpparam=YX{TIMESTAMP:9}&userAgent={USER_AGENT}&platform={ADV_SOURCE}&packageName={ADV_APP_PACKAGENAME}&order_no={ORDER_ID}';
			state.ruleForm.vrifyLink1 = 'http://103.44.245.5:3003/mb00/Generate_Order.aspx?vcode={VERIFY_CODE}&order_no={ORDER_ID}';
			state.ruleForm.reflection = 'SCZhongShiYou.CommonInterface';
			break;
		// 四川保宏
		case '117956837385459717':
			state.ruleForm.chargingLink = 'http://8.130.39.69:3000/getValidCode?channel=通道号&phone={MOBILE}&cpParam=BH{TIMESTAMP:9}&ip={IP}';
			state.ruleForm.vrifyLink1 = 'http://8.130.39.69:3000/pay?batchNo={ORDER_ID}&validCode={VERIFY_CODE}';
			state.ruleForm.reflection = 'BJPinJiu.CommonInterfaceF';
			break;

		// 掌中飞天
		case '138079581530773509':
			state.ruleForm.chargingLink = 'http://43.140.205.48:3301/sendCode?key=qm007&mobile={MOBILE}&ip={IP}&cpparam=ZHFT';
			state.ruleForm.vrifyLink1 = 'http://43.140.205.48:3301/submit?linkid={ORDER_ID}&smscode={VERIFY_CODE}';
			state.ruleForm.reflection = 'BJFeiTian.CommonInterfaceA';
			break;

		// 深圳三眼
		case '149399809925601285':
			state.ruleForm.chargingLink = 'http://39.108.139.186/data/inter/loadcodeV2?biz=业务编码&ditch=69&mobile={MOBILE}&cpparam={TIMESTAMP:9}&ip_address={IP}&x-app-name=douyin&x-app-package=com.douyin&userAgent={USER_AGENT}';
			state.ruleForm.vrifyLink1 = 'http://39.108.139.186/data/inter/paysubmit?vcode={VERIFY_CODE}&orderid={ORDER_ID}';
			state.ruleForm.reflection = 'SZKongJian.CommonInterface';
			break;

		// 湖南桔柚
		case '126133181161166853':
			state.ruleForm.chargingLink = 'http://47.92.35.219:8002/order/verificationCode?mdn={MOBILE}&agentKey=2d31b7daf2d345c0b9034485fd87440e&dbredirect=前缀{TIMESTAMP:8}&appPackage=com.douyin';
			state.ruleForm.vrifyLink1 = 'http://47.92.35.219:8002/order/submit?smsCode={VERIFY_CODE}&linkId={ORDER_ID}';
			state.ruleForm.reflection = 'HNYiTeng.CommonInterfaceH';
			break;

		default:
			break;
	}
}

const chargin = (res) => {
	// console.log(res);

}
//
const inputChange = (val) => {
	state.ruleForm.incomePrice = val;
}

// 打开弹窗
const openDialog = (row: DiCustomerProduct, type: string) => {
	if (type === 'edit') {
		state.ruleForm = row;
		state.isShowDialog = true;
		customerDictQuery();
		state.ruleForm.arrivalType = 1;
		state.ruleForm.syncPlanDaily = 1;
		Rendering.value.disabled = false;
		if (state.ruleForm.arrivalType === 1) isArrival.isArrivalControl = true;
	} else if (type === 'disabled') {
		state.ruleForm = row;
		state.isShowDialog = true;
		Rendering.value.disabled = true;
		if (state.ruleForm.arrivalType === 1) isArrival.isArrivalControl = true;
	} else {
		state.ruleForm = row;
		state.isShowDialog = true;
		customerDictQuery();
		state.ruleForm.code = generateRandomLowercaseString(6);
		Rendering.value.disabled = false;
		if (state.ruleForm.arrivalType === 1) isArrival.isArrivalControl = true;
	}
	// state.ruleForm = row;// JSON.parse(JSON.stringify(row));
	// state.isShowDialog = true;
	// customerDictQuery();
};

// 关闭弹窗
const closeDialog = () => {
	mittBus.emit('submitRefresh');
	state.isShowDialog = false;
};

// 取消
const cancel = () => {
	state.isShowDialog = false;
};

// 提交
const submit = () => {
	ruleFormRef.value.validate(async (valid: boolean) => {
		if (!valid) return;
		let res;
		if (state.ruleForm.id != undefined && state.ruleForm.id > 0) {
			res = await SysDiCustomerProductApi().editPost(state.ruleForm);
		} else {
			res = await SysDiCustomerProductApi().addPost(state.ruleForm);
		}
		if (res.data.resCode != '0000')
			ElMessage.error(res.data.resMessage);
		else {
			ElMessage.success("操作成功");
			closeDialog();
		}
	});
};

// 业务列表
const customerDictQuery = async () => {
	await SysDiCustomerApi().queryAll({ status: 1 }).then((res) => {
		if (res.data.resCode === '0000')
			state.customerDict = res.data.result ?? [];
	});
};

// 到量控制请求 & 用户 上限是否禁用
const arrivalControl = () => {
	isArrival.isArrivalControl = !isArrival.isArrivalControl;
}

// 导出对象
defineExpose({ openDialog });
</script>
